<template>
	<view>
		<view class="" v-for="item in product" :key="item.id" @click="handleToDetail(item.id)">
			<view class="goods_item">
				<view class="goods_item_img">
					<Skeleton :loading="loading" avatarShape="square">
						<image :src="item.cover_img" mode="" @load="imgload"></image>
					</Skeleton>
				</view>
				<view class="goods_item_info">
						<text>{{item.title}}</text>
						<text>库存:{{item.stock}}</text>
						<text class="item_price">价格:{{item.amount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Skeleton from '../J-skeleton/J-skeleton.vue'
	export default {
		name: "list-goods",
		data() {
			return {

			};
		},
		components: {
			Skeleton
		},
		methods: {
			handleToDetail(id) {
				uni.navigateTo({
					url: `../../pages/detail/detail?id=${id}`
				})
			},
			imgload() {
				// this.loading=false
				// console.log(1)
			}
		},
		props: {
			product: {
				type: Array,
				default () {
					return []
				}
			},
			loading: {
				type: Boolean,
				default () {
					return true
				}
			}

		}
	}
</script>

<style scoped>
	.goods_item {
		display: flex;
		margin-top: 10rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.goods_item image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.goods_item_info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
	}

	.item_price {
		color: red;
		font-weight: bold;
	}
</style>
